<!DOCTYPE html>
<html lang="ZN">
<head>
    <meta charset="UTF-8">
    <title>异常列表</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <!--<link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>-->
    <!--<script src="../static/jquery/jquery-3.6.0.min.js"></script>-->
    <script src="../static/layer/layer.js"></script>
</head>
<body>
<div class="layui-bg-gray">
  <div class="layui-row layui-col-space15">

    <div class="layui-col-md12">
      <div class="layui-panel">

        <div style="padding-top: 0px">
          <table class="layui-hide" id="tab"  lay-filter="tab"></table>
        </div>

      </div>
    </div>
  </div>
</div>
<script type="text/html" id="toolbarDemo">
    <!--<a href="/" class="layui-btn layui-btn-sm">返回任务列表</a>-->
    <a href="/" class="layui-btn layui-btn-sm layui-btn-danger">刷新列表</a>
    <span style="padding-left: 30px">异常任务列表每日0点清空。</span>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
  layui.use('element', function(){
    var element = layui.element;
  });

  layui.use('table', function(){
    var table = layui.table;

    table.render({
      elem: '#tab'
      , even: true //开启隔行背景
      , url: '/getErrorData'
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
        title: '提示'
        ,layEvent: 'LAYTABLE_TIPS'
        ,icon: 'layui-icon-tips'
      }]
      , request: {
        pageName: 'pageNum',
        limitName: 'pageSize'
      }
      ,initSort: {
          field: 'expectTime' //排序字段，对应 cols 设定的各字段名
          ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
      }
      , title: '异常任务列表'
      , page: true
      , sort:true
      , limit: 20
      , limits: [1, 5, 10, 20, 50, 100]
      ,cellMinWidth: 90
      ,cols: [
        [
          {field:'taskName',title: '任务名称',style:'color:red;',width:200}
          ,{field:'expectTime',title: '期望时间',style:'color:red;',width:200,sort: true}
          ,{field:'absolutePath', title: '文件目录',style:'color:red;'}
          /*,{field:'filename',title: '文件名称',style:'color:red;'}
          ,{field:'filesuffix', title: '文件后缀',style:'color:red;'}
          ,{field:'fileNameType', title: '命名格式',style:'color:red;'}
          ,{field:'status', title: '任务状态',templet:setState }*/
          ,{field:'operator', title: '操作',toolbar: '#barDemo',width:200}
        ]
      ]
    });
      function setState(data){
          var states=data.status;
          if(states=="true" || states==true){
              return "<span style='color: green'>已完成检测</span>";
          }
          else
              return "<span style='color: red'>未处理</span>";
      }
      table.on('tool(tab)', function(obj){
          var data = obj.data;
          console.log(data);
          if(obj.event === 'del'){
              console.log("delete");
              /*var httpRequest = new XMLHttpRequest();
              var url="/deleteErrorData?taskName="+data.taskName;
              httpRequest.open('GET', url, true);
              httpRequest.send();*/
              layer.open({
                  type: 1,
                  area: ['300px', '180px'],
                  shadeClose: true, //点击遮罩关闭
                  content: '<form class="layui-form" action="/deleteErrorData">\n' +
                      '      <input type="text" name="taskName" required  lay-verify="required" hidden\n' +
                      '            value="'+data.taskName+'" style="height: 1px;margin: 0px;padding: 0px;">\n' +
                      '  <div style="padding-left: 70px;padding-top: 20px;padding-bottom: 20px"><h3 >确定删除'+data.taskName+'任务吗？</h3></div>\n' +
                      '  <div class="layui-form-item">\n' +
                      '    <div class="layui-input-block">\n' +
                      '      <button class="layui-btn layui-btn-sm" lay-submit>确定</button>\n' +
                      '    </div>\n' +
                      '  </div>\n' +
                      '</form>'
              });
          }
      });
      var reloadTable = function (item) {
          table.reload("tab", {
              where: {
              }
          });
      };
      window.setInterval(function (){reloadTable.call(this)},30000);
  });


</script>
</body>
</html>
